<template>
  <div class="app-container">
    <table-list
      ref="tableList"
      :columns="columns"
      :default-data="defaultData"
      :do-add="doAdd"
      :do-edit="doEdit"
      :do-multi-delete="doMultiDelete"
      :form-items="formItems"
      :form-rules="formRules"
      :get-list="getList"
      :search-obj="searchObj"
    />
  </div>
</template>

<script>
  import TableList from '@/components/TableList'
  import { getList as getACats } from '@/api/aCat'
  import { getList, doAdd, doEdit, doMultiDelete } from '@/api/article'
  export default {
    components: { TableList },
    data() {
      const imgUrlCellRender = {
        name: 'VxeImage',
        props: {
          width: 36,
          height: 36,
        },
      }
      const aCatsRender = {
        name: 'VxeSelect',
        props: {
          placeholder: '分类',
          clearable: true,
          filterable: true,
        },
        options: [],
      }
      return {
        aCatsRender,
        getList,
        doAdd,
        doEdit,
        doMultiDelete,
        defaultData: {
          id: '',
          a_cat_id: '',
          title: '',
          pic: '',
          readed: '',
          idx: '',
          content: '',
        },
        columns: [
          { type: 'checkbox', width: 70 },
          { type: 'seq', width: 80 },
          { field: 'title', title: '标题' },
          {
            field: 'pic',
            title: '图片',
            cellRender: imgUrlCellRender,
          },
          {
            field: 'aCat.name',
            title: '分类',
          },
          { field: 'readed', title: '阅读量' },
          { field: 'idx', title: '排序' },
          {
            field: 'action',
            title: '操作',
            slots: { default: 'action' },
            width: 200,
          },
        ],
        formItems: [
          {
            field: 'a_cat_id',
            title: '分类',
            span: 24,
            itemRender: aCatsRender,
          },
          {
            field: 'title',
            title: '标题',
            span: 12,
            itemRender: {
              name: 'VxeInput',
              props: { placeholder: '标题', clearable: true },
            },
          },
          {
            field: 'pic',
            title: '图片',
            span: 12,
            itemRender: {
              name: 'VxeUpload',
              props: {
                mode: 'image',
                multiple: false,
                showButtonText: false,
                dragSort: true,
                moreConfig: {
                  maxCount: 1,
                },
                imageConfig: {
                  width: 40,
                  height: 40,
                },
                uploadMethod: this.uploadMethod,
              },
            },
          },
          {
            field: 'readed',
            title: '阅读量',
            span: 12,
            itemRender: {
              name: 'VxeNumberInput',
              props: { placeholder: '初始阅读量', clearable: true },
            },
          },
          {
            field: 'idx',
            title: '排序',
            span: 12,
            itemRender: {
              name: 'VxeNumberInput',
              props: { placeholder: '排序', clearable: true },
            },
          },
          {
            field: 'content',
            title: '内容',
            span: 24,
            itemRender: { name: 'WangEditor' },
          },
        ],
        formRules: {
          name: [{ required: true, message: '请输入标题' }],
        },
        searchObj: {
          collapseNode: false,
          items: [
            {
              field: 'title',
              title: '标题',
              span: 4,
              itemRender: {
                name: 'VxeInput',
                defaultValue: '',
                props: { placeholder: '标题', clearable: true },
              },
            },
            {
              field: 'a_cat_id',
              title: '分类',
              span: 4,
              itemRender: aCatsRender,
            },
          ],
        },
      }
    },
    created() {
      this.getACats()
    },
    methods: {
      uploadMethod({ file }) {
        return this.$refs.tableList.uploadMethod({ file }, 'pic')
      },
      async getACats() {
        const {
          data: { data },
        } = await getACats()
        this.aCatsRender.options = data.map((cat) => ({
          label: cat.name, // 假设分类名称字段为 name
          value: cat.id, // 假设分类 ID 字段为 id
        }))
        console.log(this.aCatsRender)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
